function style(...args) {
  this._style.push(...args)
}
function event(...args) {
  this._event.push(...args)
}
const createNode = (tag) => ({
  tag,
  _style: [],
  style,
  _event: [],
  event,
})

function fontSize() {}
const createStyle = (name) => ({
  name,
  fontSize,
})
function click(...args) {
  this._click.push(...args)
}
const createEvent = () => ({
  _click: [],
  click,
})

const div = () => {
  const node = createNode('div')
  const event = createEvent()
  return {
    node,
    event,
    click(...args) {
      this.event.click(...args)
    },
  }
}

const string = (val) => {
  if (typeof val === 'string') {
    return {
      get() {
        return val
      },
      set(v) {
        val = v
      },
    }
  }
  console.error('string')
  return ''
}
const div = (...args) => node('div', args)

const name = string('tom')
const d_fz = string('14px')
object()
array()
const map = map().set('a',{})
const bgc_red = style().backgroundColor('red')
const c_white = style().color('white')
const fz_14_16 = style().fz(d_fz)
const changeName = () => {
  if (name.get() === 'tom') {
    d_fz.set('16px')
    name.set('jack')
  } else {
    d_fz.set('14px')
    name.set('tom')
  }
}
div(text(name)).css(bgc_red, c_white, fz_14_16).on('click', changeName).mount('#web')
